<template>
  <div>
    <van-row>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </van-row>
    <van-row v-if="flag">
      <div class="historycontent">
        <span>搜索历史</span>
        <van-icon name="delete" @click="del" class="del"/>
      </div>
      <div class="tagList" v-if="historyArr.length > 0">
        <van-tag v-for="item in historyArr" :key="item" @click="setValue(item)">{{item}}</van-tag>
      </div>
      <div v-else>
        <van-divider contentPosition="center">暂无搜索历史</van-divider>
      </div>
    </van-row>
    <van-row v-else>
      <div class="shop">
        <van-swipe-cell v-for="item in searchData" :key="item.id">
          <van-cell :border="true" :title="item.name" :value="item.ctime | dataFormat"/>
          <template slot="right">
            <van-button square type="danger" text="删除" @click="delShop(item.id)"/>
          </template>
        </van-swipe-cell>
      </div>
    </van-row>
  </div>
</template>
           
<script>
import { Dialog } from "vant";
import { Notify } from "vant";
export default {
  data() {
    return {
      value: "",
      historyArr: [],
      searchData: [],
      flag: true
    };
  },
  methods: {
    async onSearch(val) {
      if (val.trim().length > 0) {
        this.flag = false;
        const { data: res } = await this.$http.get("/api/getprodlist");
        if (res.status == 0) {
          this.searchData = res.message;
        } else {
          this.$toast("发生了未知错误！");
        }
        let i = this.historyArr.indexOf(val);
        if (i == -1) {
          this.historyArr.unshift(val);
          window.localStorage.setItem("searchHistory", this.historyArr);
        } else {
          this.historyArr.splice(i, 1);
          this.historyArr.unshift(val);
          window.localStorage.setItem("searchHistory", this.historyArr);
        }
      } else {
        this.$toast("请输入搜索内容");
      }
    },
    onCancel() {
      this.flag = true;
    },
    del() {
      this.historyArr = [];
      localStorage.removeItem("searchHistory");
    },
    setValue(val) {
      this.value = val;
    },
    delShop(id) {
      Dialog.confirm({
        title: "警告",
        message: "是否确认删除该商品？"
      })
        .then(async () => {
          const {data:res} = await this.$http.get(`/api/delproduct/${id}`)
          if (res.status == 0) {
            Notify({ type: "success", message: "删除成功~", duration: 1500 });
            const { data: res } = await this.$http.get("/api/getprodlist");
            this.searchData = res.message;
          } else {
            Notify({ type: "danger", message: "删除失败！", duration: 1500 });
          }
           
           
        })
        .catch(() => {
            Notify({ type: "danger", message: "删除失败！", duration: 1500 });
           console.log("取消删除");

        });
    }
  },
  created() {
    let hs = window.localStorage.getItem("searchHistory");
    if (hs) {
      this.historyArr = hs.split(",");
    }
  }
};
</script>
<style lang="less" scoped>
.van-search {
  padding: 10px 5px;
}
.historycontent {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin: 15px 0;
}
.del {
  transform: translateY(5px);
}
.tagList {
  padding: 5px 10px;
  text-align: left;
}
.van-tag {
  font-family: "雅黑";
  margin: 8px 5px;
  padding: 2.4px 6px;
}
</style>
